$(function(){
    $("#add-role").click(function(){
        $("input").val("");
        $('#edit').val('false');
        $.ajax({
            url: '/admin-permission-all',
            type: 'get',
            success: function(data){
                let html = `<h4>设置角色权限</h4><ul class="list-group">`;
                for (let i = 0; i < data.length; i++) {
                    html += `<li class="list-group-item active">
                        <div class="checkbox" style="margin: 0px;">
                            <label>
                                <input type="checkbox" name="role" value="`+data[i].permission_id+`" >`+data[i].menu_name+`
                            </label>
                        </div>
                    </li>`;
                    let sData = data[i].second;
                    for (let j = 0; j < sData.length; j++) {
                        html += `<li class="list-group-item">
                            <div class="checkbox" style="margin: 0px;">
                                <label>
                                    &emsp;<input type="checkbox" name="role" value="`+sData[j].permission_id+`">`+sData[j].menu_name+`
                                </label>
                            </div>`;
                        let tData = sData[j].third;
                        for (let k = 0; k < tData.length; k++) {
                            html += `<div class="checkbox" style="margin: 0px; padding: 5px 0px;border-top: 1px solid #eee">
                                    <label>
                                        &emsp;&emsp;<input type="checkbox" name="role" value="`+tData[k].permission_id+`">`+tData[k].menu_name+`
                                    </label>
                                </div>`;
                        }
                        html += `</li>`;
                    }
                }
                html += `</ul>`;
                $('#role-list').html(html);
                layer.open({
                    type: 1,
                    title: '添加角色',
                    area: ['80vw', '80vh'],
                    content: $("#role-form-content")
                });
            }
        })
    });
    $("#role-submit").click(function(){
        let permission_ids = [];
        let name = $('#name').val();
        let edit = $('#edit').val();
        let id = $('#id').val();
        $('input[name="role"]:checked').each(function(){
            permission_ids.push($(this).val());
        });
        if (edit == 'true') {
            $.ajax({
                url: '/admin-role-edit',
                type: 'post',
                data: {id:id, role_name:name, permission_ids:permission_ids},
                success: function(data){
                    if(!data.status || data.code==0){
                        layer.msg(data.msg, {
                            icon: 5
                        });
                        return;
                    }
                    layer.msg(data.msg);
                    $('#role').bootstrapTable('refresh', {url: '/admin-role-infos'});
                }
            })
        }else{
            $.ajax({
                url: '/admin-role-add',
                type: 'post',
                data: {role_name:name, permission_ids:permission_ids},
                success: function(data){
                    if(!data.status || data.code==0){
                        layer.msg(data.msg, {
                            icon: 5
                        });
                        return;
                    }
                    layer.msg(data.msg);
                    $('#role').bootstrapTable('refresh', {url: '/admin-role-infos'});
                }
            })
        }
    })

    window.operateEvents = {
        "click #editRow":function(e, value, row, index){
            $("input").val("");
            $('#edit').val('true');
            $('#id').val(row.id);
            $('#name').val(row.role_name);
            $.ajax({
                url: '/admin-permission-all-edit',
                type: 'get',
                data:{role_id: row.id},
                success: function(data){
                    let html = `<h4>设置角色权限</h4><ul class="list-group">`;
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].selected) {
                            html += `<li class="list-group-item active">
                                <div class="checkbox" style="margin: 0px;">
                                    <label>
                                        <input type="checkbox" name="role" value="`+data[i].permission_id+`" checked >`+data[i].menu_name+`
                                    </label>
                                </div>
                            </li>`;
                        }else {
                            html += `<li class="list-group-item active">
                                <div class="checkbox" style="margin: 0px;">
                                    <label>
                                        <input type="checkbox" name="role" value="`+data[i].permission_id+`" >`+data[i].menu_name+`
                                    </label>
                                </div>
                            </li>`;
                        }

                        let sData = data[i].second;
                        for (let j = 0; j < sData.length; j++) {
                            if (sData[j].selected) {
                                html += `<li class="list-group-item">
                                    <div class="checkbox" style="margin: 0px;">
                                        <label>
                                            &emsp;<input type="checkbox" name="role" value="`+sData[j].permission_id+`" checked>`+sData[j].menu_name+`
                                        </label>
                                    </div>`;
                            } else {
                                html += `<li class="list-group-item">
                                    <div class="checkbox" style="margin: 0px;">
                                        <label>
                                            &emsp;<input type="checkbox" name="role" value="`+sData[j].permission_id+`">`+sData[j].menu_name+`
                                        </label>
                                    </div>`;
                            }
                            let tData = sData[j].third;
                            for (let k = 0; k < tData.length; k++) {
                                if (tData[k].selected) {
                                    html += `<div class="checkbox" style="margin: 0px; padding: 5px 0px;border-top: 1px solid #eee">
                                        <label>
                                            &emsp;&emsp;<input type="checkbox" name="role" value="`+tData[k].permission_id+`" checked>`+tData[k].menu_name+`
                                        </label>
                                    </div>`;
                                }else{
                                    html += `<div class="checkbox" style="margin: 0px; padding: 5px 0px;border-top: 1px solid #eee">
                                        <label>
                                            &emsp;&emsp;<input type="checkbox" name="role" value="`+tData[k].permission_id+`">`+tData[k].menu_name+`
                                        </label>
                                    </div>`;
                                }

                            }
                            html += `</li>`;

                        }
                    }
                    html += `</ul>`;
                    $('#role-list').html(html);
                    layer.open({
                        type: 1,
                        title: '<b>编辑角色</b>--'+row.role_name,
                        area: ['80vw', '80vh'],
                        content: $("#role-form-content")
                    });
                }
            })
        },
        "click #deleteRow":function(e, value, row, index){
            $.ajax({
                url: '/admin-role-delete',
                type: 'post',
                data: {id:row.id},
                success: function(data){
                    if(!data.status || data.code==0){
                        layer.msg(data.msg, {
                            icon: 5
                        });
                        return;
                    }
                    layer.msg(data.msg);
                    $('#role').bootstrapTable('refresh', {url: '/admin-role-infos'});
                }
            })
        }
    }
    $("#role").bootstrapTable({
        url:"/admin-role-infos",
        columns:[
            {
                field:"select",
                title:"全选",
                checkbox:true
            },
            {
                field:'id',
                title:'id',
                visible:false
            },
            {
                field:'role_name',
                title:'角色名字'
            },
            {
                field:'updater',
                title:'更新人'
            },
            {
                field:'update_time',
                title:'更新时间'
            },
            {
                field:'Button',
                title:'操作',
                events:operateEvents,
                formatter:addButtons,
            },
        ],
        striped:true,
        sortName:'id',                    // 排序字段名
        sortOrder:'asc',                   // 升降序，默认升序
        icons:{
            paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
            paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
            refresh: 'glyphicon-refresh icon-refresh',
            toggle: 'glyphicon-list-alt icon-list-alt',
            columns: 'glyphicon-th icon-th',
            detailOpen: 'glyphicon-plus icon-plus',
            detailClose: 'glyphicon-minus icon-minus',
        },
        pagination:true,                    // 分页
        onlyInfoPagination:false,           // 只显示数据量
        pageSize:10,                         // 每页数据量
        pageList:[10,20,30,50],                   // 可选择每页数据量
        search:false,                        // 显示搜索
        selectItemName:'id',
        showHeader:true,                    // 显示头
        showColumns:true,                   // 显示列下拉框
        showRefresh:true,                   // 显示刷新
        showToggle:true,                    // 切换试图
        showPaginationSwitch:true,          // 显示分页切换按钮
        idField:'id',                       // 指定主键
        uniqueId:'id',                      // 设置每一行唯一标识符
        detailView:false,                    // 显示详细页面
        searchAlign:'left',                // 搜索框位置
        buttonsAlign:'right',                 // 按钮位置
        paginationVAlign:'bottom',
        paginationHAlign:'right',
        paginationPreText:'上一页',
        paginationNextText:'下一页',
        toolbar:'#toolbar',
        toolbarAlign:'left',
        sidePagination:'server',            // 客户端还是服务端分页
        queryParams: function queryParams(params) {
            return {
                pageNumber: params.offset,
                pageSize: params.limit,
                name:$("#search_name").val(),
            };
        },
    });
    //查询按钮事件
    $('#search_btn').click(function(){
        $('#role').bootstrapTable('refresh', {url: '/admin-role-infos'});
    });
    //添加按钮
    function addButtons(){
        return [
            "<button type='button' id='editRow' class='btn btn-success btn-xs'>编辑</button>&nbsp;&nbsp;",
            "<button type='button' id='deleteRow' class='btn btn-danger btn-xs'>删除</button>",
        ].join("")
    }
    function te(){
        return [
            "<textarea class='remark'></textarea>",
        ].join("")
    }
})
